﻿<!DOCTYPE html>
<html>
<head>
    <title>Grids - Selection Events</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="../../../css/samples.css" />
    <link rel="stylesheet" href="../../../css/integralui.css" />
    <link rel="stylesheet" href="../../../css/integralui.treegrid.css" />
    <link rel="stylesheet" href="../../../css/themes/theme-flat-blue.css" />
    <script type="text/javascript" src="../../../external/angular.min.js"></script>
    <script type="text/javascript" src="../../../js/angular.integralui.min.js"></script>
    <script type="text/javascript" src="../../../js/angular.integralui.lists.min.js"></script>
    <script type="text/javascript" src="../../../js/angular.integralui.treegrid.min.js"></script>
    <script type="text/javascript">
 		angular
			.module("appModule", ["integralui"])
			.controller("appCtrl", ["$scope", "IntegralUITreeGridService", "$timeout", function($scope, $gridService, $timeout){
				$scope.gridName = "gridSample";
				$scope.sampleRows = [];
				$scope.defaultIcon = "icons-medium empty-doc";

				$scope.sampleColumns = [
					{ id: 1, headerText: "Customer/Order ID", headerAlignment: "center", width: 180 },
					{ id: 2, headerText: "Ordered", headerAlignment: "center", contentAlignment: "center", width: 90 },
					{ id: 3, headerText: "Shipped", headerAlignment: "center", contentAlignment: "center", width: 90 },
					{ id: 4, headerText: "Ship Via", headerAlignment: "center", width: 125 },
					{ id: 5, headerText: "Freight", headerAlignment: "center", contentAlignment: "right", width: 80 },
					{ id: 6, headerText: "Address", headerAlignment: "center", width: 200 },
					{ id: 7, headerText: "City", headerAlignment: "center" },
					{ id: 8, headerText: "Country", headerAlignment: "center" }
				];

				$scope.flatData = [
					{ 
						id: 1,
						icon: "icons-medium people",
						text: "Piccolo und mehr",
						cells: [{ cid: 1, text: "Piccolo und mehr" }, { cid: 6, text: "Geislweg 14" }, { cid: 7, text: "Salzburg" }, { cid: 8, text: "Austria" }]
					},
					{ 
						id: 11,
						pid: 1,
						text: "Order #10259",
						cells: [{ cid: 1, text: "10259" }, { cid: 2, text: "9/13/2012" }, { cid: 3, text: "9/27/2012" }, { cid: 4, text: "Federal Shipping" }, { cid: 5, text: "360.63" }]
					},
					{ 
						id: 12,
						pid: 1,
						text: "Order #11094",
						cells: [{ cid: 1, text: "11094" }, { cid: 2, text: "1/20/2013" }, { cid: 3, text: "2/5/2013" }, { cid: 4, text: "Federal Shipping" }, { cid: 5, text: "200.14" }]
					},
					{ 
						id: 2,
						icon: "icons-medium people",
						text: "Frankenversand",
						cells: [{ cid: 1, text: "Frankenversand" }, { cid: 6, text: "Berliner Platz 43" }, { cid: 7, text: "München" }, { cid: 8, text: "Germany" }]
					},
					{ 
						id: 21,
						pid: 2,
						text: "Order #11536",
						cells: [{ cid: 1, text: "11536" }, { cid: 2, text: "12/9/2013" }, { cid: 3, text: "1/7/2014" }, { cid: 4, text: "Speedy Express" }, { cid: 5, text: "85.53" } ]
					},
					{ 
						id: 22,
						pid: 2,
						text: "Order #14472",
						cells: [{ cid: 1, text: "14472" }, { cid: 2, text: "11/14/2014" }, { cid: 3, text: "11/25/2014" }, { cid: 4, text: "Speedy Express" }, { cid: 5, text: "112.30" } ]
					},
					{ 
						id: 3,
						icon: "icons-medium people",
						text: "Laughing Bacchus Wine Cellars",
						cells: [{ cid: 1, text: "Laughing Bacchus Wine Cellars" }, { cid: 6, text: "1900 Oak St." }, { cid: 7, text: "Vancouver" }, { cid: 8, text: "Canada" }]
					},
					{ 
						id: 31,
						pid: 3,
						text: "Order #11495",
						cells: [{ cid: 1, text: "11495" }, { cid: 2, text: "8/7/2013" }, { cid: 3, text: "9/20/2013" }, { cid: 4, text: "United Package" }, { cid: 5, text: "49.28" } ]
					}
				];
				
				$scope.eventLog = [];
				
				$scope.onAfterSelect = function(e){
					var eventText = "";
					switch (e.object.type){
						case 'column':
							eventText = e.object.headerText;
							break;

						default:
							eventText = e.object.text;
							break;
					}

					$scope.eventLog.unshift({ name: 'afterSelect', info: ' event was fired for object: ' + eventText + '.' }); 
					$scope.$apply();
				}
				
				$scope.onBeforeSelect = function(e){
					var eventText = "";
					var isEventCancelled = false;

					if (e.object){
						switch (e.object.type){
							case 'column':
								eventText = e.object.headerText;
								break;

							default:
								eventText = e.object.text;

								if (e.object.pid == 2){
									isEventCancelled = true;

									eventText += '. Selection was cancelled.';
								}
								break;
						}
					}

					$scope.eventLog.unshift({ name: 'beforeSelect', info: ' event was fired for object: ' + eventText }); 
					$scope.$apply();

					if (isEventCancelled)
						return false;
				}
				
				$scope.onSelectionChanged = function(e){
					$scope.eventLog.unshift({ name: 'selectionChanged', info: ' event was fired when current selection has changed.' }); 
					$scope.$apply();
				}
				
			    $scope.gridEvents = {
					afterSelect: function(e){
						return $scope.onAfterSelect(e);
					},
					beforeSelect: function(e){
						return $scope.onBeforeSelect(e);
					},
					selectionChanged: function(e){
						return $scope.onSelectionChanged(e);
					}
			    }

				$scope.clearEventLog = function(){
					$scope.eventLog.length = 0;
				}

				var loadTimer = $timeout(function(){
					$gridService.loadData($scope.gridName, $scope.flatData, null, null, true);
					$timeout.cancel(loadTimer);
				}, 1);
			}]);
    </script>
    <style type="text/css">
    	.control-panel
    	{
    		margin: 20px 0;
    		width: 800px;
    	}
		.event-block
		{
			background: white;
			border: thin solid gray;
			border-radius:3px;
			width: 800px;
			height: 155px;
		}
		.event-log
		{
			list-style-type: none;
			margin: 2px 0 0 0;
			padding: 0;
			height: 125px;
			overflow: auto;
		}
		.event-log li
		{
			padding-left: 15px;
		}
		.event-log li > span
		{
			color: #c60d0d;
		}
        .directive
        {
        	border: thin solid #dadada;
        	width: 800px;
        	height: 270px;
        }
   </style>
</head>
<body oncontextmenu="return false;">
	<div class="header">
        <div class="header-content">
		    <h1><span style="color:#c60d0d">IntegralUI</span> Studio <span style="font-size:0.75em; font-style:italic">for Web</span></h1>
        </div>
        <hr class="head-separator" />
    </div>
    <div class="content" ng-app="appModule">
        <div class="feature" ng-controller="appCtrl">
	        <h2 class="feature-title">Grids / Selection Events</h2>
	        <div class="feature-content" style="width:750px">
                <iui-treegrid name="{{gridName}}" class="directive" columns="sampleColumns" rows="sampleRows" row-icon="defaultIcon" events="gridEvents" show-footer="false"></iui-treegrid><br />
                <div class="control-panel">
                    <div class="event-block">
						<button type="button" ng-click="clearEventLog()" style="float:right;margin:3px 12px; width:50px">Clear</button>
						<p style="margin:0 10px; padding: 3px; border-bottom: thin solid #c5c5c5">Event log:</p>
                        <ul class="event-log">
							<li ng-repeat="ev in eventLog"><span>{{ev.name}}</span>{{ev.info}}</li>
						</ul>
                    </div>
                </div>
                <br style="clear:both;"/>
                <div class="feature-help">
                    <p><span class="initial-space"></span>This sample presents how to handle selection events in TreeGrid directive, AngularJS. Whenever a column or row is selected, the following events are fired:</p>
                     <ul class="feature-points">
                        <li><span style="color:#c60d0d">afterSelect</span> - Occurs after column or row is selected</li>
                        <li><span style="color:#c60d0d">beforeSelect</span> - Occurs before column or row is selected</li>
                        <li><span style="color:#c60d0d">selectionChanged</span> - Occurs when selection changes</li>
                    </ul>
                    <p><span class="initial-space"></span>The event object carried with beforeSelect and afterSelect events, can be either colum or a row object. Depending on value of object's <strong>type</strong> field, you can determine whether a column or a row is selected.</p>
                    <p><span class="initial-space"></span>By handling beforeSelect event you can prevent object from becoming selected, based on custom conditions set in your code. In our example, whenever orders for customer 'Frankenversand' are clicked, the selection process is cancelled.</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
